@media (max-width: 768px) {
    .nav_none {
        display: block;
        height: 66px;
        position: fixed;
        top: 0;
        z-index: 10;
        width: 100%;
        background: #fff;
    }
    .mnav{
        width: 100%;
        position: absolute;
        z-index: 99;
        top: 0;
        right: 0;
    }


    .mnav .menu{
        display: block;
        width: 100%;
        height: 100vh;
        background: #ff8a00;
        position: absolute;
        border-top: #cccccc 0.5px solid;
        left: -100vw;
        bottom:-100vh;
        transition: all 0.5s ease 0.2s;
    }
    .menu.active{
        left: -18vw;
        box-shadow: rgb(38, 67, 176) -4px 0px 44px -6px;
    }

    .menu_x {
        width: 30px;
        height: 34px;
        position: absolute;
        top: 16px;
        right: 30px;

    }
    .menu_x::before{
        content: "";
        display: block;
        position: absolute;
        width: 40px;
        height: 2px;
        transform: rotate(-45deg) translateY(9px)translateX(-17px);
        background: rgb(0, 0, 0);
    }
    .menu_x::after {
        content: "";
        display: block;
        position: absolute;
        width: 40px;
        height: 2px;
        transform:rotate(45deg) translateY(17px)translateX(9px) ;
        background: rgb(0, 0, 0);
    }
    .mnav .menu ul li i{
        display: inline-block;

        /*padding-left: 10px;*/
    }
    .nav_span3{
        padding-left: 15px;
    }
    .mnav .menu ul{
        position: absolute;
        left: 52%;
        top: 35%;
        margin-left: -87px;
        margin-top: -165px;
        width: 50%;
    }
    .mnav .menu ul li:hover i{
        display: inline-block;
    }
    .mnav .menu ul li:hover span{
        display: inline-block;
    }
    .mnav .menu ul li span{
        display: inline-block;
        width: 110px;
        color: rgb(0, 0, 0);
    }
    .mnav .menu ul li a{
        color: #fff;
    }
    .mnav .menu ul li{
        float: none;
        display: block;
        overflow: hidden;
        font-size: 18px;
        width: auto;
        height: 39px;
        color: #fff;
        line-height: 23px;
        border: none;
        margin: 15px 0;
        border-bottom: 1px solid #ddd;
    }
    .mnav .menu ul li:last-child{
        display: block;
    }
    .nav-btn{
        cursor: pointer;
        /* display: none; */
        position: absolute;
        right: 20px;
        top: 12px;
        z-index: 1000;
    }
    .nav-btn span{
        position: relative;
        display: block;
        width: 35px;
        height: 3px;
        margin: 15px 0;
        background: #000;
        transition: transform 400ms linear;
    }

    .nav-btn span:before,.nav-btn span:after{
        content: "";
        display: block;
        position: absolute;
        width: 35px;
        height: 3px;
        background: #000;
    }
    .nav-btn span:before{
        bottom: 10px;
    }
    .nav-btn span:after{
        top: 10px;
        transition: transform 400ms linear;
    }
    .nav_logo{
        margin: 10px;
    }
    .nav_logo img{height: 48px;}
}